<style type="text/css">
#preview{
    position:absolute;
    border:1px solid #ccc;
    background:#333;
    padding:5px;
    display:none;
    color:#fff;
    z-index: 999;
}
</style>
<script type="text/javascript">
    this.imagePreview = function(){ 
        /* CONFIG */
            
            xOffset = 10;
            yOffset = 30;
            
            // these 2 variable determine popup's distance from the cursor
            // you might want to adjust to get the right result
            
        /* END CONFIG */
        $("a.preview").hover(function(e){
            this.t = this.title;
            this.title = "";    
            var c = (this.t != "") ? "<br/>" + this.t : "";
            $(this).parent().append("<p id='preview'><img src='"+ this.href +"' alt='Image preview' />"+ c +"</p>");                                
            $("#preview")
                .css("top",(e.pageY - xOffset) + "px")
                .css("left",(e.pageX + yOffset) + "px")
                .fadeIn("fast");                        
        },
        function(){
            this.title = this.t;    
            $("#preview").remove();
        }); 
        $("a.preview").mousemove(function(e){
            $("#preview")
                .css("top",(e.pageY - xOffset) + "px")
                .css("left",(e.pageX + yOffset) + "px");
        });         
    };

    // starting the script on page load
    $(document).ready(function(){
        imagePreview();
            
        $('.room-select').change(function(e){
            if($(this).val()=='0'){
                $(this).addClass('select-white');
            }else{
                $(this).addClass("select-red");
            }

        })
    });
</script>

<section id="content" class="cols-a">
    <article class="vcard">
        <header class="module-a">
            <h2 class="fn org"><%= @tour.tour_name_eng %></h2>
            <p class="rating-a <%= hotel_star(@tour.rating) %>">0/5</p>
            <p class="link"><a href="./">Return</a></p>
            <p class="addthis_toolbox addthis_default_style addthis_16x16_style"><span>Share:</span> <a class="addthis_button_email"></a> <a class="addthis_button_facebook"></a> <a class="addthis_button_twitter"></a></p>
        </header>
        <div class="slider-a">
            <% @tour_images.each do |hi| %>
                <figure><%= image_tag hi.image.url(:large)  %></figure>
            <% end %>
        </div>
        <div class="tabs-a">
            <ul>
                <li>Description</li>
                <li>inclusion</li>
                <li>Exclusion</li>
                <li>Term And Condition</li>
            </ul>
            <div>
                <div>
                    <%= raw(@tour.description_eng) %>
                </div>
                <div>
                    <%= raw(@tour.inclusion_eng) %>
                </div>
                <div>
                    <%= raw(@tour.exclusion_eng) %>
                </div>
                <div>
                    <%= raw(@tour.termcon_eng) %>
                </div>
            </div>
        </div>
        <% @tour.tour_days.each do |td| %>
            <div>
                <table>
                    <tr>
                        <td colspan="2"><h3 > <span style="color: #1A90E0"> Day <%= td.day_number %> </span> - Title</h3></td>
                    </tr>
                    <tr>
                        <td class="span1">
                            <% td.tour_day_images.each do |tdi| %>
                                <a href="<%= tdi.image.url(:large) %>" class="preview" title="<%= tdi.description_eng %>"><%= image_tag tdi.image.url(:small), alt: "gallery thumbnail" %></a> </br>
                            <% end %>
                        </td>
                        <td class="span11">
                            <%= raw(td.description_eng) %>              
                        </td>
                    </tr>
                </table>
                
            </div>
            
        <% end %>

    </article>
    <aside>
        <!-- <p class="scheme-a">36 - Nguyen Chi Thanh - Dong Da, Hanoi, Vietnam <iframe width="242" height="156" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.com/maps?f=q&amp;source=s_q&amp;hl=en&amp;geocode=&amp;q=36+-+Nguyen+Chi+Thanh+-+Dong+Da,+Hanoi,+Vietnam&amp;aq=&amp;sll=37.0625,-95.677068&amp;sspn=55.323926,114.169922&amp;ie=UTF8&amp;hq=&amp;hnear=36+Nguy%E1%BB%85n+Ch%C3%AD+Thanh,+Gi%E1%BA%A3ng+V%C3%B5,+Ba+Dinh+District,+Hanoi,+Wietnam&amp;t=m&amp;ll=21.025707,105.811729&amp;spn=0.012498,0.020857&amp;z=14&amp;iwloc=A&amp;output=embed"></iframe></p> -->
        <p class="scheme-b">Price From <span> <%= number_to_currency(@tour.usd_price, :unit => "$. ", :delimiter => "," ,:precision => 0 )  %> <span>/ Night</span></span></p>
        <form action="./" method="post" class="form-a">
            <fieldset>
                <legend>Booking form</legend>
                <p class="date-a">
                    <span>
                        <label for="faa">Check in</label>
                        <input type="text" id="faa" name="faa" required>
                    </span>
                    <span>
                        <label for="fab">Check Out</label>
                        <input type="text" id="fab" name="fab" required>
                    </span>
                </p>

                <p class="select-a">
                    <span>
                        <label for="fad">Rooms</label>
                        <select id="fad" name="fad">
                            <option>01</option>
                            <option>02</option>
                            <option>03</option>
                            <option>04</option>
                            <option>05</option>
                        </select>
                    </span>
                    <span>
                        <label for="fae">Adults</label>
                        <select id="fae" name="fae">
                            <option>01</option>
                            <option>02</option>
                            <option>03</option>
                            <option>04</option>
                            <option>05</option>
                        </select>
                    </span>
                    <span>
                        <label for="faf">Child</label>
                        <select id="faf" name="faf">
                            <option>01</option>
                            <option>02</option>
                            <option>03</option>
                            <option>04</option>
                            <option>05</option>
                        </select>
                    </span>
                </p>
                <!-- <p class="scheme-c">Total Booking <span><span>$</span>720</span></p> -->
                <p class="submit"><button type="submit">Check Price</button></p>
            </fieldset>
        </form>
    </aside>
</section>